<template>
    <ConfigGlobal :size="currentSize">
        <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''"/>
        <routerSearch/>
    </ConfigGlobal>
</template>
<script lang="ts" setup>
import {isDark} from '@/utils/is';
import {useAppStore} from '@/store/modules/app';
import {useDesign} from '@/hooks/web/useDesign';
import {useCache} from '@/hooks/web/useCache';
import routerSearch from '@/components/RouterSearch/index.vue';
import CacheKeys from '@/constants/CacheKeys';
import {useUserStore} from '@/store/modules/useUserStore';
import {usePermissionStore} from '@/store/modules/usePermissionStore';
import request from "@/request";
import {CountryVO} from "@/types/country";

defineOptions({name: 'APP'});

const {getPrefixCls} = useDesign();
const prefixCls = getPrefixCls('app');
const appStore = useAppStore();
const currentSize = computed(() => appStore.getCurrentSize);
const greyMode = computed(() => appStore.getGreyMode);
const {wsCache} = useCache();

// 根据浏览器当前主题设置系统主题色
const setDefaultTheme = () => {
    let isDarkTheme = wsCache.get(CacheKeys.IS_DARK);
    if (isDarkTheme === null) {
        isDarkTheme = isDark();
    }
    appStore.setIsDark(isDarkTheme);
};
setDefaultTheme();

if (!wsCache.get(CacheKeys.COUNTRY)) {
    request.get("/hive/query").then((res) => {
        const data: CountryVO[] = res.data;
        const errorData = data.filter(item => item.isError);
        const country = data.filter(item => !item.isError)
        wsCache.set(CacheKeys.COUNTRY, country);
        wsCache.set(CacheKeys.COUNTRY_ERROR, errorData);
    })
} else {
    console.log(wsCache.get(CacheKeys.COUNTRY))
}
</script>
<style lang="scss">
$prefix-cls: #{$namespace}-app;

.size {
    width: 100%;
    height: 100%;
}

html,
body {
    @extend .size;

    padding: 0 !important;
    margin: 0;
    overflow: hidden;

    #app {
        @extend .size;
    }
}

.#{$prefix-cls}-grey-mode {
    filter: grayscale(100%);
}
</style>
